<template>
  <div class="category">
    <div class="left-body">
      <a @click="goRecommend" :class="{'active': currentIndex === 0 ? true : false}">推荐</a>
      <a v-for="(item, index) in categoryData" :key="index" @click="goClick(index)"
        :class="{ 'active': currentIndex === index + 1 ? true : false }" ref="leftRef">{{ item.Name }}</a>
    </div>
    <Scroll class="content" ref="categoryScroll" @watchScrollY="scrollYHandle">
      <div class="right-body">
        <div class="icon">
          <img src="@/assets/images/category/icon.jpeg" alt="">
        </div>
        <div class="section" ref="recommendRef">
          <div class="title">
            推荐
          </div>
          <ul>
            <li v-for="(item, index) in recommendData" :key="index">
              <img :src="item.PictureUrl" alt="">
              <span>{{ item.Name }}</span>
            </li>
          </ul>
        </div>
        <div class="section" v-for="(item, index) in categoryData" :key="index" ref="categoryRef">
          <div class="title">{{ item.SeName }}</div>
          <ul>
            <li v-for="i in item.SubCategories" :key="i.Id">
              <img :src="i.PictureUrl" alt="">
              <span>{{ i.Name }}</span>
            </li>
          </ul>
        </div>
        <div style="height: 300px;"></div>
      </div>
    </Scroll>
  </div>
</template>

<script>
import Scroll from '@/components/common/Scroll.vue'
import { getRecommendData, getCategoryData } from '@/network/api/category'
export default {
  name: "category",
  components: { Scroll },
  data() {
    return {
      categoryData: [],
      recommendData: [],
      allOffsetTop: [],
      heightList: [0],
      currentIndex: 0
    }
  },
  methods: {
    goClick(index) {
      this.$refs.categoryScroll.scroll.scrollToElement(this.$refs.categoryRef[index], 1000, 0, -20)
    },
    goRecommend() {
      this.$refs.categoryScroll.scroll.scrollToElement(this.$refs.recommendRef, 1000, 0, -20)
    },
    // 获取每个section的高度
    getCategoryListHeight() {
      this.heightList.push(this.$refs.recommendRef.clientHeight)
      this.$refs.categoryRef.forEach((item, index) => {
        this.heightList.push(item.offsetHeight + this.heightList[index + 1]);
      })
    },
    scrollYHandle(y) {
      y = y - 150
      for (let i = 0; i < this.heightList.length; i++) {
        if (y > this.heightList[i] && y < this.heightList[i + 1]) {
          this.currentIndex = i;
        }
      }
    }
  },
  async created() {
    const recommendData = await getRecommendData()
    this.recommendData = Object.freeze(recommendData.data)
    const categoryData = await getCategoryData()
    this.categoryData = Object.freeze(categoryData.data)
  },
  mounted() {
    window.setTimeout(() => {
      this.getCategoryListHeight()
    }, 100)
  },
}
</script>

<style lang='less' scoped>
.category {
  display: flex;
  background-color: #fff;

  .left-body {
    width: 25%;
    height: calc(100% - 50px);
    border-right: 1px solid #eee;

    a {
      display: block;
      width: 92px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      color: #333;
      padding: 10px 0;
    }
  }

  .content {
    width: 75%;
    height: calc(100vh - 50px);
    overflow: hidden;

    .right-body {
      padding: 8px;

      .icon {
        width: 260px;
        height: 128px;

        img {
          width: 100%;
        }
      }

      .section {
        .title {
          position: relative;
          font-weight: normal;
          text-align: center;
          margin: 20px 0;
          font-size: 18px;

          &::before {
            position: absolute;
            top: 10px;
            left: 85px;
            content: '';
            height: 1px;
            width: 20px;
            background-color: #555;
          }

          &::after {
            position: absolute;
            top: 10px;
            right: 85px;
            content: '';
            height: 1px;
            width: 20px;
            background-color: #555;
          }
        }

        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 33%;

            img {
              width: 53px;
              height: 53px;
            }
          }
        }
      }
    }
  }

  .active {
    border-left: 2px solid #b0352f;
  }
}
</style>